<template>
	<view class="order_total">
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight+'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="navbar-content">
					<uni-icons type="back" @click="back" color="#fff" size="26" class="back_btn"></uni-icons>
					<view class="navBar">
						<view>排行榜</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view class="navbar-content" :style="{width:'100%',height:navBarHeight+'px'}">
					<uni-icons type="back" @click="back" color="#fff" size="26" class="back_btn"></uni-icons>
					<view class="navBar">
						<view>排行榜</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<!-- <view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view> -->
		</view>
		<view class="order_main">
			<view class="order_main_top" @click="open">
				<view class="filt_date">
					{{NetworkOrder.dateType==5? NetworkOrder.startTime==NetworkOrder.endTime?NetworkOrder.endTime: NetworkOrder.startTime+'~'+NetworkOrder.endTime:filtList[NetworkOrder.dateType-1].title}}
					<view class="uniui-down1"></view>
					<view class="uniui-down2"></view>
				</view>
			</view>
			<view class="order_main_ranking">
				<view class="order_main_ranking_oneself">
					<view class="img">
						<image mode="aspectFill" class="user_img" v-if="!store.state.userInfo.avatar"
							:src="store.state.userInfo.avatar" />
						<uni-icons size="54" color="#007cff" type="contact-filled" v-else></uni-icons>
					</view>
					<view class="user_inf">
						<view class="user_name">
							<view class="name">
								{{store.state.userInfo.name}}
							</view>
							<view class="phone_tip">
								我的排名：<span class="tip_sty">{{userObj?.index||0}}</span>
							</view>
						</view>
						<view class="qty">
							<span
								style="font-weight: bold;margin-right: 6rpx;color: #007cff;">{{userObj?.qty||0}}</span>单
						</view>
					</view>
				</view>
				<view class="order_main_ranking_list">
					<view class="order_main_ranking_list_title">
						<view class="order_main_ranking_list_title_left">
							<view class="order_main_ranking_list_title_left_tip">
								排名
							</view>
							<view class="order_main_ranking_list_title_left_tip">
								头像
							</view>
							<view class="order_main_ranking_list_title_left_tip">
								名称
							</view>
						</view>
						<view class="order_main_ranking_list_title_right">
							完成量(单)
						</view>
					</view>
					<view class="tip_title_msg" v-if="NetworkOrderScoreStatObj?.length==0">
						暂无完成单排行
					</view>
					<view class="list_scroll">
						<view v-for="(item,index) in NetworkOrderScoreStatObj" class="order_main_ranking_list_item"
							:key="index">
							<view class="order_main_ranking_list_item_left">
								<view class="order_main_ranking_list_item_left_leve">

									<image style="width: 40rpx;height: 40rpx;"
										:src="`/static/network/home/leve/leve${index+1}.svg`" mode="aspectFit"
										v-if="index==0||index==1||index==2"></image>
									<span v-else>{{index+1}}</span>
								</view>
								<view class="order_main_ranking_list_item_left_img">
									<image mode="aspectFill" class="user_img" v-if="item.avatar" :src="item.avatar" />
									<uni-icons size="40" color="#007cff" type="contact-filled" v-else></uni-icons>
								</view>
								<view class="order_main_ranking_list_item_left_name">
									{{item.name}}
								</view>
							</view>
							<view class="order_main_ranking_list_item_right">
								{{item.qty}}单
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup"  type="bottom">
			<view class="popup">
				<view class="popup_top">
					<view class="popup_top_title">
						选择时间
					</view>
					<uni-icons size="28" color="#ccc" type="clear" @click="onClose"></uni-icons>
				</view>
				<view class="list_muen">
					<view v-for="(item,index) in filtList" :key="index" @click="onClickState(item.value)"
						class="list_muen_item">
						<view class="list_muen_item_title" :class="dateType==item.value?'list_muen_item_isactive':''">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="range" :disabled="dateType!=5" rangeSeparator="至" type="daterange"
						@change="changeClick" />
					<!-- <view class="example-body_tip">
						注：查询跨度不能超过一年
					</view> -->
				</view>
				<view class="footer_btn">
					<view class="footer_btn_reset" @click="onReset">
						重置
					</view>
					<view class="footer_btn_confirmation" @click="onConfirmation">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import store from '@/store_network/index.js'
	import { onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiNetwork from "@/util/network_api/network.js"
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(0)
	const navBarWidth = ref(375)
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})

	onLoad(async () => {
		//显示加载框
		uni.showLoading({
			title: '加载中',
		});
		// 获取用户信息
		await store.dispatch('getUpdataUser')
		await getNetworkOrderScoreStatObj()
		// //隐藏加载框
		uni.hideLoading();
	})
	onUnload(() => {
		uni.hideLoading()
	})
	const popup = ref()
	const filtList = ref([{ title: '今日', value: 1 }, { title: '昨日', value: 2 }, { title: '本周', value: 3 }, { title: '本月', value: 4 }, { title: '自定义范围', value: 5 }])
	const back = () => {
		uni.redirectTo({
			url: '/pages/pages_network/home/ordertotal'
		})
	}
	const NetworkOrder = ref({
		"dateType": 4,//搜索日期类型：1-今天，2-昨天，3-本周，4-本月，5-自定义时间范围
		"endTime": "",
		"networkEmpId": null,//服务商人员ID
		"startTime": ""
	})
	const end_start_Time = ref([])
	const dateType = ref(4)
	const NetworkOrderScoreStatObj = ref()
	const userObj = ref()
	const getNetworkOrderScoreStatObj = async () => {
		userObj.value = null
		await apiNetwork.getNetworkOrderScoreStat(NetworkOrder.value).then(res => {
			if (res.code == 20000) {
				NetworkOrderScoreStatObj.value = res.data.row?.finishOrder
				res.data.row.finishOrder.filter((o, index) => {
					if (o.id == store.state.userInfo.id) {
						userObj.value = { index: index + 1, ...o }
					}
				})
			}
		})
	}
	const open = () => {
		dateType.value = NetworkOrder.value.dateType
		popup.value.open()
	}
	const onClose = () => {
		popup.value.close()
	}
	const onClickState = (value) => {
		dateType.value = value
	}
	const range = ref()
	const changeClick = (val) => {
		end_start_Time.value = val
	}
	// 重置
	const onReset = () => {
		dateType.value = 4
		end_start_Time.value = []
		range.value = ''
	}
	// 确认
	const onConfirmation = () => {
		if (dateType.value === 5 && end_start_Time.value.length == 0) {
			uni.showToast({
				title: '请选择时间范围',
				icon: 'none'
			})
			return
		}
		NetworkOrder.value.dateType = dateType.value
		if (dateType.value === 5) {
			NetworkOrder.value.startTime = end_start_Time.value[0]
			NetworkOrder.value.endTime = end_start_Time.value[1]
		} else {
			NetworkOrder.value.startTime = ''
			NetworkOrder.value.endTime = ''
		}
		getNetworkOrderScoreStatObj()
		popup.value.close()
	}
</script>

<style lang="scss" scoped>
	.order_total {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/network/bg_main.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;

		.fixed {
			// position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			.navbar-content {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;
			
				.back_btn {
					margin-left: 12rpx;
					position: relative;
					z-index: 9;
				}
			
				.navBar {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}

		

		.order_main {
			padding: 20rpx 0rpx 0;
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;

			&_top {
				display: inline-block;
				margin: 0 32rpx;

				.filt_date {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					font-weight: bold;

					.uniui-down1 {
						width: 0;
						height: 0;
						border-left: 12rpx solid transparent;
						border-top: 12rpx solid #000;
						margin-left: 8rpx;
					}

					.uniui-down2 {
						width: 0;
						height: 0;
						border-right: 12rpx solid transparent;
						border-top: 12rpx solid #000;
					}
				}
			}

			&_ranking {
				margin-top: 32rpx;
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;

				&_oneself {
					display: flex;
					padding: 40rpx 28rpx 40rpx;
					border-radius: 20rpx 20rpx 0 0;
					background-color: #fff;

					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						display: flex;
						margin-right: 20rpx;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						background-color: #fff;

						.user_img {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.user_inf {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex: 1;

						.user_name {
							display: flex;
							flex-direction: column;

							.name {
								color: #000;
								font-size: 28rpx;
								margin-right: 14rpx;
								font-weight: bold;
							}

							.phone_tip {
								margin-top: 10rpx;
								color: rgba(85, 85, 85, 1);
								font-size: 24rpx;

								.tip_sty {

									font-weight: bold;
									font-size: 24rpx;
								}
							}
						}

						.qty {
							font-size: 28rpx;
						}
					}
				}

				&_list {
					margin: 12rpx;
					display: flex;
					flex-direction: column;
					flex: 1;
					overflow: hidden;

					&_title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.4);
						margin: 0 20rpx 0 0;

						&_left {
							display: flex;
							align-items: center;

							&_tip {
								margin: 20rpx 20rpx;
							}
						}
					}

					.tip_title_msg {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #999;
						height: 30vh;
					}

					.list_scroll {
						flex: 1;
						overflow: auto;
						box-sizing: border-box;
						padding-bottom: 20%;
					}

					&_item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 20rpx 20rpx 40rpx;

						&_left {
							display: flex;
							align-items: center;
							justify-content: space-between;

							&_img {
								margin: 0 22rpx 0 50rpx;
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								overflow: hidden;
								background-color: #fff;

								.user_img {
									width: 60rpx;
									height: 60rpx;
									background-color: #fff;
								}
							}

							&_leve {
								font-size: 24rpx;
								width: 40rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							&_name {
								margin: 0 20rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
							}
						}

						&_right {
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.popup {
			height: 600rpx;
			background-color: #fff;
			padding: 22rpx 24rpx;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;

			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&_title {
					font-weight: bold;
				}
			}

			.list_muen {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				&_item {
					width: calc(100%/3);
					display: flex;
					align-items: center;
					justify-content: center;

					&_title {
						background: rgba(238, 238, 238, 1);
						margin: 20rpx;
						width: 80%;
						padding: 14rpx 0;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						border-radius: 10rpx;
					}

					&_isactive {
						background-color: #007cff;
						color: #fff;
					}
				}
			}

			.example-body {
				margin: 40rpx 20rpx;

				&_tip {
					color: rgba(245, 108, 108, 1);
					font-size: 24rpx;
					margin: 20rpx 0;
				}

				// :deep(.uni-date__x-input){
				// 	font-size: 24rpx;
				// }
			}

			.footer_btn {
				display: flex;
				align-items: center;
				padding: 50rpx 40rpx 40rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;

				&_reset {
					height: 80rpx;
					color: #007cff;
					background: rgba(242, 249, 255, 1);
					width: 26%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&_confirmation {
					height: 80rpx;
					color: #fff;
					background-color: #007cff;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 32rpx;
				}
			}
		}
	}
</style>